<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="PagesUI/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="PagesUI/css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="PagesUI/scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="PagesUI/scripts/jquery-ui-no-ajax.js"></script>
<script>
	$(function() {
		$("#birthDay").datepicker({
			changeMonth : true,
			changeYear : true
		});
		
		$("#button").css("background-color", "#99f893");
		$("#button").hover(function() {
			$(this).css("background-color", "#d3ffce");
		}, function() {
			$(this).css("background-color", "#99f893");
		});
		function validateEmail(email) {
			var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
			return re.test(email);
		}
		function checkCity(strTest) {
			return strTest.indexOf(' ') === -1;
		}
		
		$("#userName").keyup(
			function() {
			var strUserName = $("#userName").val();
			if(strUserName.length > 5){
				//alert(strUserName);
				$.ajax({
							         type: "POST",
							         url: "checkUserNameExist",
							         data: strUserName,
							         success : function(data) {
							        	//alert(data);
							        	if ($("#msgUserName").length){
							 				$("#msgUserName").hide();
							 			}
							        	if(data == "not exist"){
							        		$("#msgUserName2").hide();
							        		if (!$("#msgUserName3").length) {
												var msgUserName3 = '<td id="msgUserName3" colspan="2" align="center">UserName can be use</td>';
												$("#userName").parent().after(msgUserName3);
												$("#msgUserName3").css("color", "green");
											} else {
												$("#msgUserName3").show();
											}
							        	}else{
							        		$("#msgUserName3").hide();
							        		if (!$("#msgUserName2").length) {
												var msgUserName = '<td id="msgUserName2" colspan="2" align="center">User Name was existed</td>';
												$("#userName").parent().after(msgUserName);
												$("#msgUserName2").css("color", "red");
											} else {
												$("#msgUserName2").show();
											}
							        	}
							         },
							         error: function (request, status, error) {
							             alert(error);
		  					         }
						});
			}
		});
		
		$("#signUp").click(function(){
			var strUserName = $("#userName").val();
			var strPassWord = $("#passWord").val();
			var strReEnterPassword = $("#reEnterPassWord").val();
			var strAddress = $("#address").val();
			var strSex = "";
			var strBirthDay = $("#birthDay").val();
			var strEmail = $("#email").val();
			var success = "1";
			if ($("#msgUserName2").length){
				$("#msgUserName2").hide();
			}
			if ($("#msgUserName3").length){
				$("#msgUserName3").hide();
			}
			if (strUserName == "" || strUserName.length < 6) {
				if (!$("#msgUserName").length) {
					var msgUserName = '<td id="msgUserName" colspan="2" align="center">Username must be more than 6 characters</td>';
					$("#userName").parent().after(
							msgUserName);
					$("#msgUserName").css("color", "red");
				} else {
					$("#msgUserName").show();
				}
				$("#userName").focus();
				success = "0";
				//return false;
			} else {
				$("#msgUserName").hide();
			}
			if ($("#male").is(":checked")) {
					// do something
					strSex = "male";
					$("#msgSex").hide();
			}else if($("#female").is(":checked")) {
				strSex = "female";
				$("#msgSex").hide();
			}else{
				//alert("please choose sex");
				if (!$("#msgSex").length) {
					var msgSex = '<td id="msgSex" colspan="2" align="center">Please choose your Gender</td>';
					$("#female").parent().after(
							msgSex);
					$("#msgSex").css("color", "red");
				} else {
					$("#msgSex").show();
				}
				success = "0";
				//return false;
			}
			//alert(strSex);
			if (strPassWord == "" || strPassWord.length < 6) {
				if (!$("#msgPassWord").length) {
					var msgPassWord = '<td id="msgPassWord" colspan="2" align="center">Password must be more than 6 characters</td>';
					$("#passWord").parent().after(
							msgPassWord);
					$("#msgPassWord").css("color", "red");
				} else {
					$("#msgPassWord").show();
				}
				success = "0";
				$("#passWord").focus();
				//return false;
			} else {
				$("#msgPassWord").hide();
			}
			if (strReEnterPassword == "" || strReEnterPassword.length < 6 || strReEnterPassword != strPassWord) {
				if (!$("#msgReEnterPassword").length) {
					var msgReEnterPassword = '<td id="msgReEnterPassword" colspan="2" align="center">Please enter re-Password</td>';
					$("#reEnterPassWord").parent().after(msgReEnterPassword);
					$("#msgReEnterPassword").css("color", "red");
					//alert(msgReEnterPassword);
				} else {
					$("#msgReEnterPassword").show();
				}
				success = "0";
				$("#reEnterPassword").focus();
				//return false;
			} else {
				$("#msgReEnterPassword").hide();
			}
			
			
		
			if (strEmail == "" || !validateEmail(strEmail)) {
				if (!$("#msgEmail").length) {
					var msgEmail = '<td id="msgEmail" colspan="2" align="center">Please enter a valid email address</td>';
					$("#email").parent().after(
							msgEmail);
					$("#msgEmail").css("color", "red");
				} else {
					$("#msgEmail").show();
				}
				success = "0";
				$("#email").focus();
				//return false;
			} else {
				$("#msgEmail").hide();
			}
			if(success === "1"){
				var userAccount = new Object();
				userAccount.username = strUserName;
				userAccount.password = strPassWord;
				userAccount.address = strAddress;
				userAccount.birthDay = strBirthDay;
				userAccount.sex = strSex;
				userAccount.email = strEmail;
				$.ajax({
			         type: "POST",
			         url: "signUp",
			         contentType : "application/json",
			         data: JSON.stringify(userAccount),
			         success : function(data) {
			        	 alert("Sign Up successfully");
			         },
			         error: function (request, status, error) {
			             alert(error);
				         }
			    });
			}	
			//alert("Request Successfully");
		});
	});
</script>
</head>
<body>
	<div id="" class="">
			<table>
				<tr>
					<td colspan="2"><h1>Register</h1></td>
				</tr>
				<tr>
					<td style="display: none;"><input type="text" id="manuId">
					</td>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;User Name *:</td>
					<td id="tdUserName"><input type="text" id="userName"
						name="userName"
						style="font-size: 12pt; border: 1px #CCCCCC solid; width: 300px;">
					</td>
				</tr>
				<tr>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Password *:</td>
					<td id="tdPassword"><input type="password" id="passWord"
						name="passWord"
						style="font-size: 12pt; border: 1px #CCCCCC solid; width: 250px; padding: 3px;">
					</td>
				</tr>
				<tr>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Re-enter Password *:</td>
					<td id="tdreEnterPassword"><input type="password"
						id="reEnterPassWord" name="reEnterPassword"
						style="font-size: 12pt; border: 1px #CCCCCC solid; width: 250px; padding: 3px;">
					</td>
				</tr>
				
				
				<tr>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Birthday:</td>
					<td id="tdBirthday"><input type="text" id="birthDay"
						name="birthDay"
						style="font-size: 12pt; border: 1px #CCCCCC solid; width: 200px; padding: 3px;">
					</td>
				</tr>
				
				<tr>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address:</td>
					<td id="tdAddress"><input type="text" id="address"
						name="address"
						style="font-size: 12pt; border: 1px #CCCCCC solid; width: 300px; padding: 3px;">
					</td>
				</tr>
				
				<tr>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sex *:</td>
					<td><input type="radio" name="sex" value="male" id="male">Male <input
						type="radio" name="sex" value="female" id="female" style="margin-left: 60px">Female
					</td>
				</tr>
				
				<tr>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email *:</td>
					<td id="tdEmail"><input type="text" id="email" name="email"
						style="font-size: 12pt; border: 1px #CCCCCC solid; width: 250px; padding: 3px;">
					</td>
				</tr>
				
				<tr>
					<td colspan="2"><br /></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><button name="submit"
							id="signUp" style="font-size: 11pt; padding: 3px;">Sign
							Up</button></td>
				</tr>
			</table>
	</div>
</body>
</html>